<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    .switch input[type="checkbox"] {
        display:none;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #2196F3;
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
</style>
<div class="row">
    <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="page-title-wrapper">
            <div class="page-title-box">
                <h4 class="page-title bold">分类管理</h4>
            </div>
            <div class="breadcrumb-list">
                <ul>
                    <li class="breadcrumb-link"><a th:href="@{admin}"><i class="fas fa-home mr-2"></i>首页</a></li>
                    <li class="breadcrumb-link active">分类管理</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-body">
        <div id="toolbar">
                <button id="btn_add" type="button" class="btn btn-primary" onclick="addCategory()">
                    <span class="fa fa-plus" aria-hidden="true"></span>新增
                </button>
        </div>
        <table class="table-sm mt-3" id="table"></table>
        <div id="categoryLayer" style="display: none;padding: 20px;">
            <table id="p-table"></table>
        </div>
    </div>

</section>

<!-- 表单模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formTitle"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="formContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveOrUpdateBtn" onclick="saveOrUpdate()">保存
                </button>
            </div>
        </div>
    </div>
</div>


<script>
    const treeTableConf = {
        id: "table",
        table: null,
        columns: [
            {
                field: 'selectItem',
                radio: true
            },
            {
                field: 'name',
                title: '分类名称',
                align: "left"
            },
            {
                field: 'icon',
                title: '图标',
                align: "center",
                formatter: function (value, row, index) {
                    return '<i class="' + value.icon + '"></i>';
                }
            },
            {
                field: 'type',
                title: '类型',
                align: "center",
                formatter: function (value) {
                    if (value.type === 0) {
                        return '目录'
                    } else if (value.type === 1) {
                        return '网站'
                    } else if (value.type === 2) {
                        return '文章'
                    }
                }
            },
            /*    {
                    field: 'description',
                    title: '分类描述',
                    align: "center"
                },*/
            {
                field: 'sort',
                title: '排序',
                align: "center",
            },
            {
                field: 'status',
                title: '显示/隐藏',
                align: "center",
                formatter: typeSwitch
            },
            {
                field: 'operation',
                title: '操作',
                align: "center",
                formatter: function (row, index) {
                    let add = '';
                    if (row.pid === 0) {
                        add = '<button type="button" class="effect-btn btn btn-warning mt-2 mr-2 icon-lg" onclick="addRow(' + row.id + ')"><i class="fas fa-plus"></i></button>';
                    }
                    const edit = '<button type="button" class="effect-btn btn btn-info mt-2 mr-2 icon-lg" onclick="editRow(' + row.id + ')"><i class="fas fa-edit"></i></button>';
                    const del = '<button type="button"  class="effect-btn btn btn-danger mt-2 mr-2 icon-lg" onclick="deleteRow(' + row.id + ')"><i class="fas fa-trash-alt"></i></button>';
                    return add + edit + del;
                }
            }]
    };

    /*加载列表*/
    $(function () {
        const table = new TreeTable(treeTableConf.id, "/category/list", treeTableConf.columns, "id");
        table.setExpandColumn(1);
        table.setIdField("id");
        table.setCodeField("id");
        table.setParentCodeField("pid");
        table.setStriped(false);
        table.init();
        treeTableConf.table = table;

    });

    /*新增*/
    function addCategory() {
        Core.load("#formContent", "/category/add", function () {
            $('#formTitle').text('新增')
            $("#formModal").modal('show');
        }, 2);
    }

    /*添加子集*/
    function addRow(id) {
        Core.load("#formContent", "/category/add/child?pid=" + id, function () {
            $('#formTitle').text('新增下级')
            $("#formModal").modal('show');
        }, 2);
    }

    /*编辑*/
    function editRow(id) {
        Core.load("#formContent", "/category/edit?id=" + id, function () {
            $('#formTitle').text('编辑')
            $("#formModal").modal('show');
        }, 2);
    }

    /*删除*/
    function deleteRow(id) {
        Core.confirm("确定删除该分类？", function () {
            Core.postAjax("/category/delete", {"id": id}, function (data) {
                if (data.status === 200) {
                    treeTableConf.table.refresh();
                }
                layer.msg(data.msg);
            })
        })
    }

    //表格中开关控件
    function typeSwitch(value, row, index){
        let isChecked = "";
        if (value.status==1) {
            isChecked="checked";
        }
        return '<label class="switch"> <input id="switch_' + value.id + '" onclick="switchChange(' + value.id + ')"  type="checkbox" '+isChecked+'> <span class="slider"></span></label>';
    }

    function switchChange(id) {
        const state=$("#switch_"+id).is(":checked");
        const status = state ? 1:0;
        const params = {id: id, status: status};
        const str = jQuery.param(params);
        Core.postAjax('/category/update/status', str, function (data) {
            if (data.status === 200) {
                treeTableConf.table.refresh();
            }
            layer.msg(data.msg);
        },function () {
            Core.unmask("#switch_"+id);
        })
    }

    function saveOrUpdate() {
        var $f = $('#categoryForm');
        var valid = $f[0].checkValidity();
        var url ="/category/add";
        if( $f.find("input[name='id']").val()){
            url= "/category/edit"
        }else {
            if($f.find("select[name='pid']").val()){
                url ="/category/add/child";
            }
        }
        if (valid) {
            Core.mask("#saveOrUpdateBtn");
            Core.postAjax(url, $f.serialize(), function (data) {
                Core.unmask("#saveOrUpdateBtn");
                if (data.status === 200) {
                    $("#formModal").modal("hide");
                    treeTableConf.table.refresh();
                }
                layer.msg(data.msg);
            }, function () {
                Core.unmask("#saveOrUpdateBtn");
            })
        }
        $f.addClass("was-validated")
    }

</script>